<template>
  <div class="edit">
    <h2>填写信息</h2>

    <el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" status-icon>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="请选择性别">
          <el-option label="男" value="men"></el-option>
          <el-option label="女" value="women"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学号" prop="sno">
        <el-input v-model="ruleForm.sno"></el-input>
      </el-form-item>
      <el-form-item label="专业班级" prop="class">
        <el-input v-model="ruleForm.class" placeholder="例：软件1803"></el-input>
      </el-form-item>
      <el-form-item label="QQ" prop="qq">
        <el-input v-model="ruleForm.qq"></el-input>
      </el-form-item>
      <el-form-item label="所选方向" prop="interest">
        <el-select v-model="ruleForm.interest" placeholder="请选择方向">
          <el-option label="产品" value="pm"></el-option>
          <el-option label="运营" value="yunying"></el-option>
          <el-option label="视觉" value="design"></el-option>
          <el-option label="前端" value="fe"></el-option>
          <el-option label="后端" value="back"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
    export default {
        name: "Edit",
      data(){
          return{
            ruleForm:{
              name:'',
              sex:'',
              sno:'',
              class:'',
              qq:'',
              interest:''
            },
            labelPosition:'left',
            rules:{
              name:[
                {required:true,message:'请输入姓名',trigger:'blur'},
                {min:2,max:10,message:'长度在2到10个字符',trigger:'blur'}
              ],
              sex:[
                {required:true,message:'请选择性别',trigger:'change'}
              ],
              sno:[
                {required:true,message:'请输入学号',trigger:'blur'},
                {type:'number',max:8,message:'请输入有效的8位学号',trigger:'blur'}
              ],
              class:[
                {required:true,message:'请输入专业班级',trigger:'blur'}
              ],
              qq:[
                {required:true,message:'请输入QQ号码',trigger:'blur'},
                {type:'number',min:5,max:13,message:'请输入有效的QQ号码',trigger:'blur'}
              ],
              interest:[
                {required:true,message:'请选择自己的方向',trigger:'change'}
              ]
            }
          }
      },
      methods:{
        submitForm(ruleForm){
          this.$refs[ruleForm].validate((valid)=>{
            if(valid){
              //提交
            }
          })
        }
      }
    }
</script>

<style scoped>
h2{
  text-align: center ;
}
.el-form{
    padding: 20px;
  }
  .el-input__inner{
    border-color: pink;
  }
</style>
